<template>
	<view>
		<block v-if="!imgPath">
			<qf-image-cropper ref="cropper" :cropScale="cropScale" :src="imgSrc" @crop="handleCrop" />
		</block>
		<block v-if="imgPath">
			<view class="crop-cont cont_center">
				<image :src="imgPath" mode="widthFix"></image>
			</view>
			<view class="crop-bottom">
				<view class="crop-a left" @click="getBack">取消</view>
				<view class="crop-btn right" @click="onSubCrop">保存</view>
			</view>
		</block>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import index from '../../../uni_modules/uview-ui';
import uploadImage from '../../../utils/uploadImage';
import { mapMutations, mapState } from 'vuex';
export default {
	data() {
		return {
			cropScale: '1:1', //裁剪比例，默认1:1
			width: 500,
			// imgSrc: 'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
			imgSrc: null, //需要裁剪地址
			imgPath: null, //裁剪后图片地址
			isfrom: null //页面来源
		};
	},
	computed: {
		...mapState('recognition', ['currentGoodsVuex'])
	},
	onLoad(options) {
		if (options) {
			if (options.isfrom) {
				this.isfrom = options.isfrom;
			}
			if (options.scale) {
				//裁剪比例
				this.cropScale = options.scale;
			}
			if (options.src) {
				//需要裁剪的地址
				this.imgSrc = decodeURIComponent(options.src);
			}
		}
		// if (!common.isEmpty(this.storage.get('fileData'))) {
		//     this.storage.remove('fileData');
		// }
	},
	methods: {
		...mapMutations('recognition', ['setCurrentGoods']),
		handleCrop(e) {
			console.log(e);
			let that = this;
			if (e && e.tempFilePath) {
				this.imgPath = e.tempFilePath; // 😒😒上传file格式图片
			}

			// if (e && e.tempFilePath) {
			// 	var filePath = null;
			// 	// #ifdef H5
			// 	// 返回besa64 {tempFilePath: '…qD4BlmXardc/z2wLW/we1LoP21+aEvgAAAABJRU5ErkJggg=='}
			// 	this.imgPath = e.tempFilePath; // 😒😒上传file格式图片
			// 	// #endif
			// 	// #ifdef MP-WEIXIN
			// 	// 返回缓存地址 {tempFilePath: "http://tmp/92DOAKXWBPmrb8fd3ad722b9693120bf7ab6dbda5f18.png"}
			// 	var filePaths = e.tempFilePath;

			// 	uni.getFileSystemManager().readFile({
			// 		filePath: filePaths, //选择图片返回的相对路径
			// 		encoding: 'base64', //编码格式
			// 		success: (res) => {
			// 			//成功的回调
			// 			//console.log('data:image/png;base64,'+res.data) // 截图确定拿到的结果
			// 			that.imgPath = 'data:image/png;base64,' + res.data; // 😒😒转换base64
			// 		}
			// 	});
			// 	// #endif
			// }
		},
		onSubCrop() {
			//确定
			// this.uploadHsFile(this.imgPath); // 上传base64 格式
			this.getUploadFile(this.imgPath); // 上传file格式
		},
		async uploadHsFile(imageData) {
			//上传base64格式图片
			let that = this;
			console.log(imageData);
			await uploadImage
				.uploadImage(imageData)
				.then((res) => {
					console.log(res);
				})
				.catch((err) => {
					console.log(err);
				});
		},
		async getUploadFile(file) {
			//上传file格式图片
			let that = this;
			try {
				const res = await uploadImage.uploadImage(file);
				const list = JSON.parse(JSON.stringify(that.currentGoodsVuex.createList));
				if (list.length > 0) {
					list[that.currentGoodsVuex.index].dishes[that.currentGoodsVuex.ind].img = res;
				}
				const foodList = JSON.parse(JSON.stringify(that.currentGoodsVuex.foodList));
				if (foodList.length > 0) {
					that.$set(foodList[that.currentGoodsVuex.index], 'image', res);
					// foodList[that.currentGoodsVuex.index].image = res;
				}
				that.setCurrentGoods({
					index: that.currentGoodsVuex.index,
					ind: that.currentGoodsVuex.ind,
					imageUrl: res,
					foodName: that.currentGoodsVuex.foodName,
					from: that.currentGoodsVuex.from,
					createList: list,
					foodList,
					form: that.currentGoodsVuex.form
				});
				that.$refs.uToast.show({ type: 'success', message: '保存成功' });
				uni.reLaunch({
					url: that.currentGoodsVuex.from
				});
			} catch (e) {
				console.log(e);
				that.$refs.uToast.show({ type: 'error', message: '保存失败,请稍后重试' });
			}
		},
		getBack() {
			//取消返回
			this.imgPath = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.crop-cont {
	width: 100%;
	height: 100vh;
	padding: 30rpx 50rpx;
	background: #333;
}

.crop-cont > image {
	display: block;
	width: 100%;
}

.crop-bottom {
	width: 100%;
	overflow: hidden;
	background: #fff;
	padding: 20rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
}

.crop-a {
	width: 120rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	color: #f3c45d;
	text-align: center;
}

.crop-btn {
	width: 120rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	color: #fff;
	background: #f3c45d;
	text-align: center;
	border-radius: 16rpx;
}
</style>
